<template>
  <div class="home">
    <h1>Auto Card</h1>
    <h2>欢迎{{$store.state.user?.name?$store.state.user.name:'xxx'}}!!!</h2>
    <van-cell-group inset class="cell">
      <van-field
        v-model="user.id"
        name="id"
        label="学号"
        placeholder="暂无信息"
        readonly
        :rules="[{ required: true, message: '请填写学号' }]"
      />
      <van-field
        v-model="user.name"
        name="name"
        label="名称"
        placeholder="暂无信息"
        :readonly="!edit"
        :rules="[{ required: true, message: '请填写名称' }]"
      />
      <van-field
        v-model="user.qq"
        name="qq"
        label="qq"
        placeholder="暂无信息"
        :readonly="!edit"
      />
      <van-field name="site" label="地点">
        <template #input>
          <div style="flex:1" @click="selectSite">{{user.sname}}</div>
          <van-icon name="more-o" size="20" v-show="edit" @click="selectSite"/>
        </template>
      </van-field>
      
      <van-field name="autocard" label="打卡">
        <template #input>
          <van-switch v-model="user.autocard" size="20" :disabled="!edit"/>
        </template>
      </van-field>
      <van-field name="sendEmail" label="发邮件">
        <template #input>
          <van-switch v-model="user.sendEmail" size="20" :disabled="!edit"/>
        </template>
      </van-field>
      <van-row justify="center">
        <van-col span="8">
          <van-button plain class="btn" round type="primary" :disabled="!edit" @click="handleBack">撤 销</van-button>
        </van-col>
        <van-col span="8" offset="2">
          <van-button class="btn" round type="primary" @click="handleEdit">{{edit?"保 存":"编 辑"}}</van-button>
        </van-col>
      </van-row>
    </van-cell-group>
  </div>
</template>
<script>
export default {
    data(){
      return {
        unum: '',
        edit: false,  // 编辑状态，与按钮禁用有关
        user:{
          id: this.$store.state.uid,
          name:"",
          qq:"",
          sid:"",
          sname:"",
          autocard: false,
          sendEmail: false
        }
      }
    },
    created(){
      this.loadpage()
    },
    // 缓存编辑的信息
    beforeUnmount(){
      // 防止刷新进去时缓存
      if(this.$store.state.uid){
        this.$store.commit("setCache",{user:this.user})
        this.$store.commit("setCache",{edit:this.edit})
      }
    },
    methods:{
      // 编辑保存
      handleEdit(){
        if(!this.edit){
          // 编辑操作，恢复活性
          this.$notify({ type: 'primary', message: '可以进行编辑！' })
        }else{
          // 保存操作
          // 保存动画
          let toast = this.$toast.loading({
            message: '保存中...',
            forbidClick: true,  // 禁止点击
            duration: 0,  // 消失时间
            overlay: true // 遮罩
          });
          this.axios.get("setuser",{
            params:{
              ...this.user
            }
          }).then((res)=>{
            toast.clear()
            if(res.data){
              // 保存成功
              this.$notify({ type: 'success', message: '保存成功！' })
            }
          })
        }
        this.edit = !this.edit
      },
      // 撤销
      handleBack(){
        this.user = {...this.$store.state.user}
        this.$notify({ type: 'primary', message: '已经撤销！' })
      },
      // 加载页面
      loadpage(){
        // 登录状态验证
        if(this.$store.state.uid){
          if(!this.$store.state.user){
            // console.log('查无用户');
            this.$router.push('adduser')
          }else{
            // console.log('查有用户');
            if(this.$store.getters.getCache('user')){
              // 如果有缓存直接获取缓存的信息
              this.user = this.$store.getters.getCache('user')
              this.edit = this.$store.getters.getCache('edit')
            }else{
              // 如果没有缓存读取state数据
              this.user = {...this.$store.state.user}
            }
          }
        }else{
          // console.log('没有登录');
          this.$router.push('login')
        }
      },
      // 刷新数据
      reLoad(){
        this.axios.get('getuserv',{
          params:{
            uid: this.user.id
          }
        }).then((res)=>{
          this.$store.commit('setUser',res.data)
          this.user = {...this.$store.state.user}
        })
      },
      // 跳转到位置页面
      selectSite(){
        // 编辑状态点了才有用
        if(!this.edit){
          return
        }
        this.$router.push("addsite")
      }
    }
}
</script>
<style lang="scss" scoped>
.home{
  margin: 20px;
}
.btn{
  margin-top: 20px;
  width: 100%;
}
.cell{
  text-align: left;
  padding: 16px 0;
}
.btn{
  flex: 1;
}
</style>